<template>
    <div class="myCourse">

        <!-- <div class="myCourse-select">
            <div class="select-item" v-for="(item,index) in list" :class="[item.addClass]" @click="select(index)">
                <span class="iconfont" :class="item.icon"></span>
                <span class="text">{{item.name}}</span>
            </div>
        </div> -->
        <div class="select-box">
            <div class="select-name" v-for="(item,index) in list" :class="item.addClass" @click="select(index)">{{item.name}}</div>
            <div style="clear:both"></div>
        </div>

        <div class="content-box1" >
            <div class="content-data ">
                <!-- <div class="course-item" v-for="(item,index) in listData" :class="item.addClass" @click="goContent('/dbcourse_content/'+item.courseId)"> -->
                <div class="course-item" v-for="(item,index) in listData" :class="item.addClass" @click="goContent('/courseCenter/'+item.courseId)">
                    <img :src="$axios.defaults.baseURL+item.photo" alt="">
                    <span class="title">{{item.title}}</span>
                    <div class="box">
                        <el-progress :text-inside="true" :stroke-width="16" :percentage="item.jindu" class="jin" v-show="item.courseType=='1' || item.courseType=='6'"></el-progress>
                        <span :title="item.address" class="money" v-show="Number(item.presentPrice)!=0 &&item.courseType=='4'">{{item.address}}</span>
                        <span :title="item.address" class="money" v-show="Number(item.presentPrice)==0 &&item.courseType=='4'">{{item.address}}</span>
                        <!-- <span class="man iconfont iconwodeicon">8</span> -->
                        <span class="number iconfont iconbofang2">{{item.classHours}}课时</span>
                    </div>
                    <div class="box">
                        <span class="name fenlei" :title="item.courseTypeLabel">{{item.courseTypeLabel}}</span>
                        <span class="name" style="float:right">{{item.createDate}}</span>
                        <!-- <span class="time">加入学习</span> -->
                    </div>
                </div>
                <nodata v-show="listData.length==0 && start"></nodata>
                <div style="clear:both"></div>
            </div>
            <ui-pagination class="study-pagination" :total="total" @pageChange="pageChange" :size="pageSize" v-show="listData.length!=0"></ui-pagination>
        </div>
        <!-- <div class="content-box" v-show="index==1">
            <nodata></nodata>
        </div>
        <div class="content-box" v-show="index==2">
            <div class="content-data ">
                <div class="course-item" v-for="(item,index) in listData" :class="item.addClass" @click="goContent(item,'/main/movieContent/')">
                    <img :src="item.photo" alt="">
                    <span class="title">{{item.title}}</span>
                    <div class="box">
                        <span class="money" v-show="Number(item.presentPrice)!=0">￥{{item.presentPrice}}</span>
                        <span class="money" v-show="Number(item.presentPrice)==0">免费</span>

                        <span class="number iconfont iconbofang2">{{item.classHours}}课时</span>
                    </div>
                    <div class="box">
                        <span class="name">{{item.courseTypeLabel}}</span>
                        <span class="name" style="float:right">{{item.createDate}}</span>

                    </div>
                </div>
                <div style="clear:both"></div>
            </div>
            <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="10"></ui-pagination>
        </div> -->
        <!-- <nodata></nodata> -->


    </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import nodata from '@/components/nodata.vue'

export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            start:false,
            total:null,
            index:0,
            list:[
                {name:'正在进行',addClass:'active',clearStudy:false},
                {name:'已完成',addClass:'',clearStudy:true},
            ],
            typeList:[
                {icon:'iconbofang',name:'点播课程',addClass:''},
                {icon:'iconzhibobofangshexiangjiguankanmianxing',name:'直播课程',addClass:''},
                {icon:'iconlaoshi',name:'面授课程',addClass:''},
            ],
            clearStudy:false,
            loading:false,
            pageSize:9,
            pageNo:1,
            listData:[],
        }
    },
    created(){
        this.getData();
    },
    mounted(){

    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getData(){
          let that = this;
          this.loading = true;
          this.$axios.$post("/f/studyCenter?pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&clearStudy="+this.clearStudy)
          .then(function (response) {
            console.log(response,9090)
                that.start = true;
                let list = response.data;
                that.total = response.count;
                if(list.length!=0){
                    list.forEach((item,i)=>{
                        item = Object.assign(item,item.educationCourse.courseInfo,item.educationCourse)
                        if(item.detailsLength!=0){
                            item.jindu =  Math.ceil((item.userStudyCount/item.detailsLength)*100)
                        }
                        else{
                            item.jindu  = 0;
                        }
                    })
                }
                that.listData = list;
                that.loading = false;
          })
          .catch(function (error) {
              // handle error
              console.log(error);
          })
        },
        select(index){
            this.index = index;
            this.list.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "active";
                    this.pageNo = 1;
                    this.clearStudy = item.clearStudy;
                    this.getData();
                }
                else{
                    item.addClass = ""
                }
            })
        },
        goContent(url){
            this.$router.push(url);
        },
        pageChange(index){
            this.pageNo = index;
            this.getData();
        }
    }
}
</script>

<style lang="less">
    .myCourse{
        width:100%;
        height:100%;
        padding:25px;
        box-sizing:border-box;
        overflow:hidden;
        overflow-y:auto;
        .study-pagination{
            width:100% !important;
        }
        .content-data{
            width:100%;

            min-height:240px;
            .out-item{
                width:275px;
                height:70px;
                line-height:70px;
                box-shadow: 0 2px 8px #e0e0e0;
                text-align:center;

                margin-top:20px;
                cursor:pointer;
                float:left;
                margin-right:50px;
                position:relative;
                img{
                    width:100%;
                    height:100%;
                    display:block;
                    background:#222222;
                }
                span{
                    position:absolute;
                    display:block;
                    width:100%;
                    left:0;
                    top:0;
                    height:100%;
                    line-height:70px;
                    text-align:center;
                    font-size:18px;
                    color:#fff;
                }
            }
            .out-item:nth-child(4n){
                margin-right:0;
            }
            .main-swiper{
                width:100%;
                height:100%;
                position:relative;
                .pre,.next{
                    width:30px;
                    display:block;
                    position:absolute;
                    top:50%;
                    z-index:9;
                    transform:translateY(-50%);
                    cursor:pointer;
                }
                .pre{
                    left:0;
                }
                .next{
                    right:0;
                }
                .slide{
                    width:280px !important;
                    height:100%;
                    background:#fff;
                    padding:15px;
                    box-sizing:border-box;
                    img{
                        width:100%;
                        height:250px;
                        display:block;
                    }
                    .name{
                        width:50%;
                        float:left;
                        height:30px;
                        line-height:30px;
                        font-size:16px;
                        margin-top:10px;
                    }
                    .grade{
                        width:50%;
                        float:left;
                        height:30px;
                        line-height:30px;
                        font-size:16px;
                        margin-top:10px;
                        text-align:right;
                    }
                    .content{
                        height:60px;
                        line-height:30px;
                        font-size:16px;
                        margin-top:10px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        float:left;
                    }
                }
            }
            .left{
                width:580px;
                border: 1px dashed #c7c7c7;
                float:left;
                .data-item{
                    width:100%;
                    height:35px;
                    box-sizing:border-box;
                    padding:0 20px;
                    margin-bottom: 7px;
                    cursor:pointer;
                    .name{
                        width:60%;
                        float:left;
                        line-height:35px;
                        height:35px;
                        color:#333333;
                        font-size:18px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        span{
                            color:#17a2b8;
                        }
                    }
                    .time{
                        width:40%;
                        height:35px;
                        line-height:35px;
                        display:block;
                        text-align:right;
                        color:#777777;
                        font-size:14px;
                        float:right;
                    }
                }
                .img-box{
                    width:100%;
                    height:100px;
                    box-sizing:border-box;
                    padding:0 20px;
                    margin-bottom:10px;
                    cursor:pointer;
                    img{
                        width:200px;
                        float:left;
                        display:block;
                        height:100%;
                        margin-right:20px;
                    }
                    .title-img{
                        width:270px;
                        float:left;
                        height:30px;
                        line-height:30px;
                        font-size:22px;
                        font-weight:500;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    .img-content{
                        width:270px;
                        float:left;
                        height:60px;
                        margin-top:10px;
                        line-height:30px;
                        font-size:16px;
                        color:#666666;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
            }
            .content-top{
                width:100%;
                height:25px;
                margin-bottom:15px;
                .title{
                    float:left;
                    padding-left:15px;
                    line-height:25px;
                    border-left:6px solid #17a2b8;
                    font-size:20px;
                    color:#333333;
                }

                .more{
                    float:right;
                    line-height:25px;
                    font-size:16px;
                    color:#444444;
                }
            }
            .content-left{
                width:460px;
                height:260px;
                background:#fff;
                float:left;
                padding:25px 20px;
                box-sizing:border-box;
                .select-data{
                    height:45px;
                    line-height:45px;
                    width:100%;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    font-size:16px;
                    color:#444444;
                    cursor:pointer;
                    span{
                        color:#2a69de;
                    }
                }

            }
            .content-right{
                width:750px;
                height:260px;
                background:#fff;
                float:right;
                padding:25px 25px;
                box-sizing:border-box;
                .data-box{
                    width:420px;
                    float:right;
                    .data-item{
                        width:100%;
                        height:35px;
                        margin-bottom: 7px;
                        cursor:pointer;
                        .name{
                            width:60%;
                            float:left;
                            line-height:35px;
                            height:35px;
                            color:#444444;
                            font-size:16px;
                            span{
                                color:#17a2b8;
                            }
                        }
                        .time{
                            width:40%;
                            height:35px;
                            line-height:35px;
                            display:block;
                            text-align:right;
                            color:#777777;
                            font-size:14px;
                            float:right;
                        }
                    }
                }
                .type-box1{
                    width:240px;
                    display:flex;
                    justify-content:space-between;
                    flex-wrap:wrap;
                    float:left;
                    .box{
                        width:110px;
                        height:40px;
                        border:1px solid #17a2b8;
                        color:#17a2b8;
                        font-size:18px;
                        text-align:center;
                        line-height:40px;
                        margin-bottom:15px;
                    }
                    .active{
                        background:#17a2b8;
                        color:#ffffff;
                    }
                }
            }
            .course-item{
              width: 220px !important;
              background: #fff;
              margin-top: 20px;
              padding-bottom: 1rem;
              cursor: pointer;
              float: left;
              margin-left:10px;
                text-align: left;
                /* text-indent:2em; */
                // width:220px !important;
                // background:#fff;
                // margin-top:20px;
                // padding-bottom:10px;
                // cursor:pointer;
                // box-shadow:0 2px 10px #d8d8d8;
                // float:left;
                // margin-right:calc((100% - 800px)/8) !important;
                // margin-left:calc((100% - 800px)/8);

                img{
                    width:100%;
                    height:126px;
                    display:block;
                }
                .title{
                    width:100%;
                    display:block;
                    margin-top:5px;
                    height:30px;
                    line-height:30px;
                    padding:0 12px;
                    box-sizing:border-box;
                    font-size:17px;
                    color:#444444;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .box{
                    width:100%;
                    box-sizing:border-box;
                    padding:0 12px;
                    height:30px;
                    .quxiao{
                          display: block;
                          padding: 0 10px;
                          margin-top: 2px;
                          height: 25px;
                          float: right;
                          line-height: 23px;
                          box-sizing: border-box;
                          border: 1px solid #4c87f4;
                          border-radius: 5px;
                          color: #4c87f4;
                          margin-right:5px;
                    }
                    .name{
                        line-height:30px;
                        float:left;
                        font-size:15px;
                        color:#444444;
                    }
                    .fenlei{
                      width: 60px;
                      overflow: hidden;
                      text-overflow:ellipsis;
                      white-space: nowrap;
                    }
                    .time{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#888888;
                    }
                    .money{
                        line-height:30px;
                        // font-size:22px;
                        color:#ff5924;
                        width: 116px;
                        float:left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .iconbofang2{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        margin-right:5px;
                        color:#4c87f4;
                    }
                    .iconbofang2:before{
                        margin-right:5px;
                    }
                    .iconwodeicon:before{
                        margin-right:5px;
                        font-size:18px;
                    }
                    .iconwodeicon{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#ff541e;
                    }
                }
            }
            // .course-item:nth-child(5n){
            //     margin-right:0 !important;
            // }
        }
        .select-box{
            display:flex;
            width:330px;
            margin:0 auto;
            .select-name{
                width:100px;
                height:40px;
                line-height:40px;
                text-align:center;
                color:#555555;
                font-size:16px;
                position:relative;
                cursor:pointer;
                float:left;
            }
            .select-name:first-child{
                margin-right:130px;
            }
            .active:after{
                content:'';
                position:absolute;
                left:0;
                bottom:0;
                width:100%;
                height:3px;
                background:#0076ca;
            }
        }
        .content-data{
            display:block !important;
        }
        .course-item{
            width:285px !important;
            margin-right:13px !important;
            margin-left:13px !important;
            .box{

                .jin{
                    width:calc(100% - 80px);
                    float:left;
                    margin-top:7px;
                }
                .number{
                    float:right;
                }
            }
        }

        .content-box1{
            width:100% !important;
        }
        .myCourse-select{
            width:100%;
            height:130px;
            margin-top:15px;
            .select-item{
                width:33.3%;
                height:100%;
                box-sizing:border-box;
                padding:20px 0;

                float:left;

                cursor:pointer;
                .iconfont{
                    font-size:42px;
                    color:#888888;
                    display:block;
                    width:50px;
                    height:50px;
                    line-height:50px;
                    text-align:center;
                    margin:0 auto;
                }
                .text{
                    font-size:16px;
                    color:#555555;
                    margin-top:0px;
                    display:block;
                    width:100%;
                    line-height:30px;
                    text-align:center;
                    height:30px;
                }
            }
            .select-item:hover{
                background:#f1f1f1;
            }
            .select-active{
                background:#f1f1f1;
            }
        }
    }


</style>
